<!-- 无人机轨迹详情 -->
<template>
  <div
    v-drag
    class="trajectory-box"
    :class="{
      'trajectory-box1': menu == '4',
    }">
    <!-- <Title title="无人机详情" class="uav-details-title" /> -->
    <div class="uav-details-title">{{ droneInfo.type == 7 ? '民航详情' : '无人机详情' }}</div>
    <p class="close" @click="off()"></p>
    <div class="info-list">
      <!-- 黑飞无电子身份证 -->
      <div class="info-li">
        <p class="info-label">
          {{ droneInfo.type == 7 ? '航班号' : droneInfo.type == 3 ? '机身序列号' : '无人机编号' }}
        </p>
        <p class="info-item">{{ droneInfo.droneID }}</p>
      </div>
      <div class="info-li" v-if="droneInfo.type != 7">
        <p class="info-label">无人机型号</p>
        <p class="info-item">
          {{ droneInfo.droneModel == null ? '*' : droneInfo.droneModel }}
        </p>
      </div>
      <div class="info-li" v-if="droneInfo.info?.droneSeriaID && droneInfo.type != 7">
        <p class="info-label">无人机序列号</p>
        <p class="info-item">{{ droneInfo.info?.droneSeriaID }}</p>
      </div>
      <template v-if="droneInfo.type != 2">
        <div class="info-li">
          <p class="info-label">起飞时间</p>
          <p class="info-item">{{ droneInfo.departureTime }}</p>
        </div>
        <div class="info-li" v-if="droneInfo.type != 7 && droneInfo.type != 1">
          <p class="info-label">飞手经度</p>
          <p class="info-item">{{ droneInfo.flyingLon }}</p>
        </div>
        <div class="info-li" v-if="droneInfo.type != 7 && droneInfo.type != 1">
          <p class="info-label">飞手纬度</p>
          <p class="info-item">{{ droneInfo.flyingLat }}</p>
        </div>
        <div class="info-li" v-if="droneInfo.type != 7">
          <p class="info-label">
            {{ (droneInfo.showType == 1 ? '当前' : '最后') + '频段' }}
          </p>
          <p class="info-item">
            {{ (!!droneInfo.spectrum ? Number(droneInfo.spectrum).toFixed(2) : '') + ' GHz' }}
          </p>
        </div>
        <div class="info-li">
          <p class="info-label">
            {{ (droneInfo.showType == 1 ? '当前' : '最后') + '经度' }}
          </p>
          <p class="info-item">{{ droneInfo.curLon }}</p>
        </div>
        <div class="info-li">
          <p class="info-label">
            {{ (droneInfo.showType == 1 ? '当前' : '最后') + '纬度' }}
          </p>
          <p class="info-item">{{ droneInfo.curLat }}</p>
        </div>
        <div class="info-li">
          <p class="info-label">
            {{ (droneInfo.showType == 1 ? '当前' : '最后') + '高度' }}
          </p>
          <p class="info-item">
            {{ droneInfo.height == null ? '*' : droneInfo.height + '米' }}
          </p>
        </div>
        <div class="info-li">
          <p class="info-label">
            {{ (droneInfo.showType == 1 ? '当前' : '最后') + '速度' }}
          </p>
          <p class="info-item">
            {{
              (droneInfo.speed > 20 ? 20 : droneInfo.speed) +
              (droneInfo.type != 7 ? ' 米/秒' : ' 千米/小时')
            }}
          </p>
        </div>
        <template v-if="droneInfo.driverName == null && suspectedInfo?.name">
          <div class="info-li" v-if="suspectedInfo?.name">
            <p class="info-label">疑似飞手姓名</p>
            <p class="info-item">{{ suspectedInfo?.name }}</p>
          </div>
          <div class="info-li" v-if="suspectedInfo?.phone">
            <p class="info-label">疑似联系方式</p>
            <p class="info-item">{{ suspectedInfo?.phone }}</p>
          </div>
        </template>
        <template v-if="droneInfo.type == 3 && droneInfo.policeDrone != 1">
          <!-- <div class="info-li" v-if="droneInfo.info.driverName">
            <p class="info-label">飞手姓名</p>
            <p class="info-item">{{ droneInfo.info.driverName }}</p>
          </div>
          <div class="info-li" v-if="droneInfo.info.driverPhone">
            <p class="info-label">疑似联系方式</p>
            <p class="info-item">{{ droneInfo.info.flyMobile }}</p>
          </div> -->

          <div class="info-li" v-if="droneInfo.info.power">
            <p class="info-label">电池电量</p>
            <p class="info-item">
              <img :src="prowerInfo" class="powerImg" />{{
                droneInfo.info.power ? Number(droneInfo.info.power) + '%' : '*'
              }}
            </p>
          </div>
        </template>
      </template>
      <template v-else>
        <div class="info-li">
          <p class="info-label">无人机角度</p>
          <p class="info-item">
            {{
              (!!droneInfo.info.direction ? Number(droneInfo.info.direction).toFixed(2) : '0') +
              ' °'
            }}
          </p>
        </div>
        <div class="info-li">
          <p class="info-label">无人机距离</p>
          <p class="info-item">
            {{
              (!!droneInfo.info.distance ? Number(droneInfo.info.distance).toFixed(2) : '0') + '米'
            }}
          </p>
        </div>
        <div class="info-li">
          <p class="info-label">
            {{ (droneInfo.showType == 1 ? '当前' : '最后') + '频段' }}
          </p>
          <p class="info-item">
            {{ (!!droneInfo.spectrum ? droneInfo.spectrum.toFixed(2) : '') + ' GHz' }}
          </p>
        </div>
        <div class="info-li">
          <p class="info-label">预估经度</p>
          <p class="info-item">{{ droneInfo.curLon }}</p>
        </div>
        <div class="info-li">
          <p class="info-label">预估纬度</p>
          <p class="info-item">{{ droneInfo.curLat }}</p>
        </div>
      </template>
      <div class="info-li last" v-show="droneInfo.showType == '1'">
        <!-- <p class="info-btn" @click="counter(1)">迫降</p> -->
        <!-- <p class="info-btn verification" @click="counter(2)">{{ $t('mapbox.check') }}</p> -->
      </div>
    </div>
    <el-image style="width: 110px; height: 12px" src="/img/top-left.png" class="fixed-img1" />
    <el-image style="width: 110px; height: 12px" src="/img/top-right.png" class="fixed-img2" />
    <el-image style="width: 110px; height: 12px" src="/img/bottom-left.png" class="fixed-img3" />
    <el-image style="width: 110px; height: 12px" src="/img/bottom-right.png" class="fixed-img4" />
  </div>
</template>
<script setup>
  import { onMounted, ref, watch, computed, toRefs, inject } from 'vue'
  import Title from '@/components/home/title.vue'
  import { useHistoryStore } from '@/stores/history'
  import { require } from '@/utils/require'
  const historyStore = useHistoryStore()
  const props = defineProps({
    detailList: {
      type: Object,
    },
    suspectedInfo: {
      type: Object,
    },
    // cardRght: {
    //   type: String,
    //   default: '11%',
    // },
    // cardBotom: {
    //   type: String,
    //   default: '-14%',
    // },
  })
  const { detailList, suspectedInfo } = toRefs(props)
  const powerImgList = [
    require('img/battery-10'),
    require('img/battery-40'),
    require('img/battery-70'),
    require('img/battery-100'),
  ]
  const prowerInfo = computed((prower) => {
    if (prower < 10) {
      return powerImgList[0]
    } else if (prower > 10 && prower < 40) {
      return powerImgList[1]
    } else if (prower > 40 && prower < 70) {
      return powerImgList[2]
    } else if (prower > 70) {
      return powerImgList[3]
    }
  })

  const emits = defineEmits(['offDroneDetail', 'showDingList'])
  const droneInfo = ref({})
  watch(
    props,
    (item) => {
      droneInfo.value = props.detailList
      console.log('droneInfo', droneInfo.value)
    },
    {
      deep: true,
    }
  )
  //监听footer切换
  const footerId = inject('footerId')
  let menu = ref(1)
  watch(
    footerId,
    (id) => {
      menu.value = id
    },
    {
      immediate: true,
      deep: true,
    }
  )
  /**
   * @description: 关闭弹窗
   */

  const off = () => {
    emits('offDroneDetail')
    // setTimeout(() => {
    historyStore.setTableH(1)
    // }, 300)
  }
  /**
   * @description: 处置命令下发
   */
  const counter = async (type) => {
    switch (type) {
      case 2:
        emits('showDingList', droneInfo.value)
        break
      default:
        break
    }
  }
  /**
   * @description: 截取两位小数
   */
  // const tofix = (num) => {
  //   return Number(num.toString().match(/^\d+(?:\.\d{0,2})?/))
  // }
  onMounted(() => {
    droneInfo.value = props.detailList
  })
</script>
<style lang="scss" scoped>
  .trajectory-box {
    width: 19vw;
    height: 58vh;
    background-color: rgba(8, 16, 22, 0.8);
    position: absolute;
    bottom: -3%;
    left: 13%;
    transform: translate(-50%, -50%);
    z-index: 99;
    padding: 15px 20px;
    .uav-details-title {
      cursor: move;
      color: #ffffff;
      font-size: 20px;
    }
    .home-title {
      position: relative;
      height: 20px;
    }
    .close {
      position: absolute;
      top: 5%;
      right: 5%;
      cursor: pointer;
      width: 15px;
      height: 15px;
      background: url('/img/close.png') no-repeat center;
      background-size: 100% 100%;
      float: right;
    }
    .info-list {
      width: 100%;
      height: calc(100% - 40px);
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: center;
      align-content: flex-start;
      justify-content: space-evenly;
      .info-li {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        align-content: center;
        margin-top: 10px;
        p {
          width: 40%;
          font-size: calc(100vw / 1920 * 14);
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
        }
        .info-label {
          width: 25%;
        }
        .info-item {
          width: 70%;
          height: 30px;
          padding-left: 5%;
          font-size: calc(100vw / 1920 * 12);
          border: 1px solid #2aa0de;
          border-radius: 4px;
          line-height: 30px;
        }
      }
      .last {
        justify-content: flex-start;
        .info-btn {
          cursor: pointer;
          width: 50px;
          height: 20px;
          margin: 0 0 0 7%;
          text-align: center;
          background: #aaa400;
          border-radius: 2px;
        }
        .verification {
          background: #09b8b9;
        }
      }
    }
    .fixed-img1 {
      position: absolute;
      top: 0px;
      left: 0px;
    }
    .fixed-img2 {
      position: absolute;
      top: 0px;
      right: 0px;
    }
    .fixed-img3 {
      position: absolute;
      bottom: 0px;
      left: 0px;
    }
    .fixed-img4 {
      position: absolute;
      bottom: 0px;
      right: 0px;
    }
  }
  .trajectory-box1 {
    position: absolute;
    bottom: 14%;
    right: -8%;
  }
</style>
